<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html">
<head>
    <th:block th:include="include :: header('新增随手记')"/>
    <th:block th:include="include :: summernote-css"/>
    <th:block th:include="include :: summernote-emoji-css"/>
    <style>
        /* 自定义删除按钮样式 */
        .delete-btn {
            padding: 2px 6px; /* 缩小按钮的内边距 */
            font-size: 10px; /* 设置较小的字体 */
            height: 20px; /* 设置按钮高度 */
            line-height: 1; /* 确保按钮文字垂直居中 */
            border-radius: 3px; /* 圆角按钮 */
            cursor: pointer; /* 增加鼠标点击效果 */
        }

        .delete-btn:hover {
            background-color: #ff4d4d; /* 悬停时改变按钮背景色 */
            color: white; /* 悬停时文字颜色为白色 */
        }

    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-note-add">
        <div class="form-group">
            <label class="col-sm-2 control-label is-required">标题：</label>
            <div class="col-sm-10">
                <input name="noteTitle" class="form-control" type="text" required>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label is-required">内容：</label>
            <div class="col-sm-10">
                <input type="hidden" class="form-control" name="noteContent">
                <div class="summernote" id="noteContent"></div>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label">摘要：</label>
            <div class="col-sm-10">
                <input name="noteSummary" class="form-control" type="text">
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label is-required">类型：</label>
            <div class="col-sm-10">
                <label class="radio-box">
                    <input type="radio" name="noteType" id="-1" value="-1" required
                    > 动态</input>
                </label>

                <div class="radio-box" th:each="dict : ${@dict.getType('note_type')}">
                    <input type="radio" th:id="${'noteType_' + dict.dictCode}" name="noteType"
                           th:value="${dict.dictValue}" th:checked="${dict.default}" required>
                    <label th:for="${'noteType_' + dict.dictCode}" th:text="${dict.dictLabel}"></label>
                </div>
                <span class="help-block m-b-none"><i class="fa fa-info-circle"></i> 在数据字典添加 note_type</span>
            </div>
        </div>

        <div class="form-group">
            <label class="col-sm-2 control-label is-required">发布形式：</label>
            <div class="col-sm-10">
                <label class="radio-box">
                    <input name="isPublic" type="radio" id=0 value=0 required th:checked="true"> 公 开</input>
                </label>
                <label class="radio-box">
                    <input name="isPublic" type="radio" id=1 value="1" required> 私 密(仅自己可见)</input>
                </label>
            </div>
        </div>

        <!-- 选择附件 -->
        <div class="form-group">
            <label class="col-sm-2 control-label">附件：</label>
            <div class="col-sm-10">
                <div class="input-group">
                    <input type="text" class="form-control" id="selectAttachment">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-white dropdown-toggle" style="height: 31px"
                                data-toggle="dropdown">
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu dropdown-menu-right" role="menu">
                        </ul>
                    </div>
                    <!-- /btn-group -->
                </div>
            </div>
        </div>


    </form>
    <!-- 已选择的附件显示 -->
    <div style="overflow-x: auto; width: 100%;">
        <div class="form-group">
            <label class="col-sm-2 control-label"></label>
            <div class="col-sm-10">
                <table id="selectedTable" class="table table-bordered">
                    <thead>
                    <tr>
                        <th style="display: none">id</th>
                        <th>文件</th>
                        <th>大小</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <!-- 选择的数据将会以表格形式展示在这里 -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
    </br>
    </br>
</div>
<th:block th:include="include :: footer"/>
<th:block th:include="include :: summernote-js"/>
<th:block th:include="include :: summernote-emoji-js"/>
<th:block th:include="include :: bootstrap-suggest-js"/>   <!-- 附件选择 -->
<script th:inline="javascript">
    var prefix = ctx + "emmanuel/noteBoard";

    // 存储选中的附件数据
    var selectedAttachmentList = [];


    $("#form-note-add").validate({
        focusCleanup: true
    });

    // 保存
    function submitHandler() {
        if ($.validate.form()) {

            // 获取所有选中的附件数据
            var attachmentList = selectedAttachmentList;

            if ($.validate.form()) {
                var formJson = $('#form-note-add').serializeArray();
                // 将表单数据转换为一个对象
                var formDataObject = {};
                formJson.forEach(function (field) {
                    formDataObject[field.name] = field.value;
                });
                formDataObject["attachmentList"] = attachmentList;
                $.operate.save(prefix + "/add", formDataObject);
            }

        }
    }

    $(function () {
        document.emojiSource = '/ajax/libs/summernote/tam-emoji/img';
        $('.summernote').summernote({
            lang: 'zh-CN',
            height: 192,
            dialogsInBody: true,
            dialogsFade: true,  //模态框淡入淡出

            toolbar: [
                ['style', ['style']],
                ['insert', ['emoji']],
                ['font', ['bold', 'underline', 'clear']],
                ['fontname', ['fontname']],
                ['color', ['color']],
                ['para', ['ul', 'ol', 'paragraph']],
                ['table', ['table']],
                ['insert', ['link', 'picture', 'video']],
                ['view', ['fullscreen', 'help']],
            ],
            callbacks: {
                onChange: function (contents, $edittable) {
                    $("input[name='" + this.id + "']").val(contents);
                },

                // 我不需要网络存储图片，如果大家需要可以打开一下代码

                // onImageUpload: function(files) {
                //     var obj = this;
                //     var data = new FormData();
                //     data.append("file", files[0]);
                //     $.ajax({
                //         type: "post",
                //         url: ctx + "common/upload",
                //         data: data,
                //         cache: false,
                //         contentType: false,
                //         processData: false,
                //         dataType: 'json',
                //         success: function(result) {
                //             if (result.code == web_status.SUCCESS) {
                //                 $('#' + obj.id).summernote('insertImage', result.url);
                //             } else {
                //                 $.modal.alertError(result.msg);
                //             }
                //         },
                //         error: function(error) {
                //             $.modal.alertWarning("图片上传失败。");
                //         }
                //     });
                // }
            }
        });
    });

    // 附件选择
    var attachmentBsSuggest = $("#selectAttachment").bsSuggest({
            indexId: 2,                 // data.value 的第几个数据，作为input输入框的内容
            indexKey: 2,                // data.value 的第几个数据，作为input输入框的内容
            allowNoKeyword: false,      // 是否允许无关键字时请求数据
            hideOnSelect: false,        // 鼠标从列表单击选择了值时，是否隐藏选择列表
            multiWord: true,            // 以分隔符号分割的多关键字支持
            separator: ",",             // 多关键字支持时的分隔符，默认为空格
            getDataMethod: "url",       // 获取数据的方式，总是从 URL 获取
            showHeader: true,           // 是否显示title
            emptyTip:"暂无数据",          // 查询为空时显示的内容，可为 html
            effectiveFieldsAlias: {
                attachmentIndex: "序号",
                attachmentId: "附件id",
                attachmentName: "文件名",
                attachmentSize: "大小"
            },
            /*优先从url ajax 请求 json 帮助数据，注意最后一个参数为关键字请求参数*/
            url: '/cloud/file/searchLikeFile?searchKey=',
            processData: function (json) { // url 获取数据时，对数据的处理，作为 getData 的回调函数

                var i, len, data = {
                    value: []
                };

                // 检查返回的JSON数据是否有效
                if (!json || !json.rows || json.rows.length == 0) {
                    return false;
                }

                // 获取建议项的数量
                len = json.rows.length;

                // 提取并返回所需的数据格式
                return {
                    value: json.rows.map(function (item, index) {
                        return {
                            attachmentIndex: index + 1,
                            attachmentId: item.id,
                            attachmentName: item.oldfilename,
                            attachmentSize: item.attachmentSize
                        };
                    })
                };

            }
        })
            .on("onDataRequestSuccess", function (e, result) { // 请求成功的数据

            })
            .on("onSetSelectValue", function (e, keyword, data) { // 选择的数据
                var selectedAttachmentData = `
                    <tr data-id="${data.attachmentId}">
                        <td style="display: none">${data.attachmentId}</td>
                        <td>${data.attachmentName}</td>
                        <td>${data.attachmentSize}</td>
                        <td><button type="button" class="btn delete-btn">删除</button></td>
                    </tr>
                `;
                // 检查表格中是否已经存在具有相同 data-id 的项
                if ($('#selectedTable tbody tr[data-id="' + data.attachmentId + '"]').length === 0) {
                    // 如果不存在，则将数据添加到表格中
                    $('#selectedTable tbody').append(selectedAttachmentData);

                    // 将选择的数据添加到 selectedAttachmentList 数组
                    selectedAttachmentList.push(data);
                } else {
                    // 该数据已存在，跳过添加
                }

            })
            .on("onUnsetSelectValue", function () {
            })
    ;

    // 为每个删除按钮绑定事件
    $('#selectedTable').on('click', '.delete-btn', function () {
        var row = $(this).closest('tr');  // 获取点击的按钮所在的行
        var attachmentId = row.data('id');  // 获取该行的 attachmentId
        // 从 selectedAttachmentList 中删除该数据
        selectedAttachmentList = selectedAttachmentList.filter(function (item) {
            return item.attachmentId !== attachmentId;
        });
        // 删除表格中的该行
        row.remove();
    });

</script>
</body>
</html>
